<template>
  <div class="newpost">
    <input type="text" placeholder="请输入主题" v-model="name" />
    <select v-model="forum">
      <!-- 最重要的传值问题 传过去的forum应为板块的id -->
      <option :value="item.id" v-for="item in blockType" :key="item.id">
        {{ item.name }}
      </option>
    </select>
    <textarea
      name=""
      id=""
      cols="40"
      rows="10"
      placeholder="请输入内容"
      v-model="content"
    ></textarea>
    <button @click="post">发布</button>
  </div>
</template>

<script>
import { loadPostBlock } from "../services/postBlock";
import { postAdd } from "../services/posts";
// import { post } from "../utils/request.js";
// import axios from "axios";
export default {
  methods: {
    post() {
      postAdd({
        forum: this.forum,
        name: this.name,
        content: this.content,
      }).then((res) => {
        this.$router.push({
          name: "PostList",
          query: {
            id: this.forum,
          },
        });
      });
    },
  },
  created() {
    loadPostBlock().then((res) => {
      this.blockType.push(...res.data);
    });
  },
  data() {
    return {
      blockType: [],
      forum: "",
      name: "",
      content: "",
    };
  },
};
</script>

<style scoped>
.newpost {
  display: flex;
  flex-direction: column;
  align-items: center;
}
input {
  display: block;
  width: 82%;
  height: 2.5rem;
  margin-top: 5rem;
  border: 1px solid black;
}
select,
textarea {
  margin-top: 2rem;
  width: 83%;
  border: 1px solid black;
}
select {
  height: 50px;
}
option {
  width: 100px;
}
button {
  width: 53%;
  height: 2rem;
  border-radius: 10px;
  background: pink;
  margin-top: 3rem;
}
</style>